<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>xiaoxi</title>
  <!-- 引入bootstrap -->
  <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />

  <!-- 引入animate.css 动画效果 -->
  <link rel="stylesheet" href="./assets/css/animate.min.css" />

  <!-- 重置样式 -->
  <link rel="stylesheet" href="./assets/css/reset.css" />

  <!-- 公共样式 引入的是一个 less文件 -->
  <link rel="stylesheet/less" href="./assets/css/common.less" />

  <!-- 首页样式 -->
  <link rel="stylesheet/less" href="./assets/css/index.less" />

   <!-- 百度地图 -->
   <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=GKQgCv8IQXpYltUqeMlLhTzsj5NC92L0"></script>
</head>

<body>
  <header class="header">
    <div class="container">
      <div class="list">
        <a class="logo wow fadeInUp" href="javascript:void(0)">LOGO</a>
        <div class="item wow fadeInUp" data-wow-delay="100ms">
          欢迎访问帝润锻造有限责任公司！ <span>Tel: 186-1234-5678</span>
        </div>
      </div>
    </div>
  </header>

  <!-- 导航 -->
  <nav class="navbar navbar-default">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
          data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="navbar-nav">
          <li><a class="wow fadeInUp" data-wow-delay="0ms" href="./index.html">网站首页</a></li>
          <li><a class="wow fadeInUp" data-wow-delay="100ms" href="./index2.html">关于我们</a></li>
          <li><a class="wow fadeInUp" data-wow-delay="200ms" href="./index3.html">新闻资讯</a></li>
          <li><a class="wow fadeInUp" data-wow-delay="400ms" href="javascript:void(0)">产品中心</a></li>
          <li><a class="wow fadeInUp" data-wow-delay="500ms" href="javascript:void(0)">工厂车间</a></li>
          <li><a class="wow fadeInUp" data-wow-delay="600ms" href="javascript:void(0)">在线招聘</a></li>
          <li><a class="wow fadeInUp" data-wow-delay="700ms" href="javascript:void(0)">在线留言</a></li>
          <li><a class="wow fadeInUp" data-wow-delay="800ms" href="javascript:void(0)">联系我们</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- 轮播图 -->
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      <li data-target="#carousel-example-generic" data-slide-to="4"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="./assets/images/banner1.png" class="img-responsive">
        <div class="content carousel-caption">
          <h1>锻造-专业锻造各种结构产品</h1>
          <p class="title">DIGRUN FORGING - PROFESSIONAL FORGING OF VARIOUS STRUCTUE PRODUCTS</p>
        </div>
        <div class="avatar carousel-caption">
          <img src="./assets/images/banner2.png" class="img-responsive">
        </div>
      </div>
      <div class="item">
        <img src="./assets/images/banner1.png" class="img-responsive">
        <div class="content carousel-caption">
          <h1>锻造-专业锻造各种结构产品</h1>
          <p class="title">DIGRUN FORGING - PROFESSIONAL FORGING OF VARIOUS STRUCTUE PRODUCTS</p>
        </div>
        <div class="avatar carousel-caption">
          <img src="./assets/images/banner2.png" class="img-responsive">
        </div>
      </div>
      <div class="item">
        <img src="./assets/images/banner1.png" class="img-responsive">
        <div class="content carousel-caption">
          <h1>锻造-专业锻造各种结构产品</h1>
          <p class="title">DIGRUN FORGING - PROFESSIONAL FORGING OF VARIOUS STRUCTUE PRODUCTS</p>
        </div>
        <div class="avatar carousel-caption">
          <img src="./assets/images/banner2.png" class="img-responsive">
        </div>
      </div>
      <div class="item">
        <img src="./assets/images/banner1.png" class="img-responsive">
        <div class="content carousel-caption">
          <h1>锻造-专业锻造各种结构产品</h1>
          <p class="title">DIGRUN FORGING - PROFESSIONAL FORGING OF VARIOUS STRUCTUE PRODUCTS</p>
        </div>
        <div class="avatar carousel-caption">
          <img src="./assets/images/banner2.png" class="img-responsive">
        </div>
      </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

  <!-- about -->
  <div class="about" id="about">
    <div class="container">
      <div class="top">
        <h1>Product display</h1>
        <div class="title">
          <div class="avatar"><img src="./assets/images/about1.png" class="img-responsive"></div>
          <div class="content">产品展示</div>
          <div class="avatar"><img src="./assets/images/about1.png" class="img-responsive"></div>
        </div>
      </div>
      <div class="box">
        <div class="list">
          <div class="item wow fadeInUp" data-wow-delay="100ms">
            <div class="picture"><img src="./assets/images/about.png" class="img-responsive"></div>
            <div class="name">产品名称</div>
            <!-- 阴影层 -->
            <div class="back">
              <div class="see">
                <a class="add" href="javascript:void(0)">查看详细</a>
              </div>
              <div class="subject">查看产品</div>
              <div class="nickname">The product name</div>
            </div>
          </div>
          <div class="item wow fadeInUp" data-wow-delay="300ms">
            <div class="picture"><img src="./assets/images/about.png" class="img-responsive"></div>
            <div class="name">产品名称</div>
            <!-- 阴影层 -->
            <div class="back">
              <div class="see">
                <a class="add" href="javascript:void(0)">查看详细</a>
              </div>
              <div class="subject">查看产品</div>
              <div class="nickname">The product name</div>
            </div>
          </div>
          <div class="item wow fadeInUp" data-wow-delay="500ms">
            <div class="picture"><img src="./assets/images/about.png" class="img-responsive"></div>
            <div class="name">产品名称</div>
            <!-- 阴影层 -->
            <div class="back">
              <div class="see">
                <a class="add" href="javascript:void(0)">查看详细</a>
              </div>
              <div class="subject">查看产品</div>
              <div class="nickname">The product name</div>
            </div>
          </div>
          <div class="item wow fadeInUp" data-wow-delay="700ms">
            <div class="picture"><img src="./assets/images/about.png" class="img-responsive"></div>
            <div class="name">产品名称</div>
            <!-- 阴影层 -->
            <div class="back">
              <div class="see">
                <a class="add" href="javascript:void(0)">查看详细</a>
              </div>
              <div class="subject">查看产品</div>
              <div class="nickname">The product name</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- team -->
  <div class="team" id="team" data-parallax="scroll" data-image-src="./assets/images/team7.png">
    <div class="container">
      <h1 class="title">
        <span>应用领域</span> / Application field
      </h1>
      <div class="list">
        <div class="item wow fadeInUp" data-wow-delay="100ms">
          <div class="avatar"><img src="./assets/images/team1.png" class="img-responsive"></div>
          <div class="content">
            汽车 / 液压机械
          </div>
        </div>
        <div class="item wow fadeInUp" data-wow-delay="300ms">
          <div class="avatar"><img src="./assets/images/team2.png" class="img-responsive"></div>
          <div class="content">
            发电设备
          </div>
        </div>
        <div class="item wow fadeInUp" data-wow-delay="500ms">
          <div class="avatar"><img src="./assets/images/team3.png" class="img-responsive"></div>
          <div class="content">
            石化配件
          </div>
        </div>
        <div class="item wow fadeInUp" data-wow-delay="700ms">
          <div class="avatar"><img src="./assets/images/team4.png" class="img-responsive"></div>
          <div class="content">
            工程机械
          </div>
        </div>
        <div class="item wow fadeInUp" data-wow-delay="900ms">
          <div class="avatar"><img src="./assets/images/team5.png" class="img-responsive"></div>
          <div class="content">
            治金 / 矿山
          </div>
        </div>
        <div class="item wow fadeInUp" data-wow-delay="1100ms">
          <div class="avatar"><img src="./assets/images/team6.png" class="img-responsive"></div>
          <div class="content">
            铁路 / 船舶机械
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- guanyu -->
  <div class="guanyu">
    <div class="container">
      <div class="right"><img src="./assets/images/guanyu.png" class="img-responsive"></div>
      <div class="title">
        <span>关于我们</span>/ ABOUT US
      </div>
      <div class="content wow fadeInUp">
        <h1>上海市锻造有限责任公司</h1>
        <p>
          上海市锻造有限责任公司上海市锻造有限责任公司上海市锻造有限责任公司上海市锻造有限责任公司上海市锻造有限责任公司上海市锻造有限责任公司上海市锻造有限责任公司上海市锻造有限责任公司上海市锻造有限责任公司上海市锻造有限责任公司上海市锻造有限责任公司上海市锻造有限责任公司上海市锻造有限责任公司上海市锻造有限责任公司上海市锻造有限责任公司上海市锻造有限责任公司上海市锻造有限责任公司上海市锻造有限责任公司
        </p>
      </div>
      <div class="test wow fadeInUp" data-wow-delay="100ms">
        <a href="javascript:void(0)">查看详情 ></a>
      </div>
      <div class="top wow fadeInUp" data-wow-delay="300ms">
        <h1>详细了解锻造</h1>
        <p>Detailed understanding of emperor run forging</p>
      </div>
      <div class="list">
        <div class="item wow fadeInUp" data-wow-delay="100ms">
          <div class="avatar">
            <img src="./assets/images/guanyu1.jpg" class="img-responsive">
            <!-- 阴影层 -->
            <div class="back">
              <p>企业文化</p>
            </div>
          </div>
        </div>
        <div class="jiantou wow fadeInUp" data-wow-delay="300ms"><img src="./assets/images/guanyu5.png" class="img-responsive"></div>
        <div class="item wow fadeInUp" data-wow-delay="500ms">
          <div class="avatar">
            <img src="./assets/images/guanyu2.jpg" class="img-responsive">
            <!-- 阴影层 -->
            <div class="back">
              <p>企业文化</p>
            </div>
          </div>
        </div>
        <div class="jiantou wow fadeInUp" data-wow-delay="700ms"><img src="./assets/images/guanyu5.png" class="img-responsive"></div>
        <div class="item wow fadeInUp" data-wow-delay="900ms">
          <div class="avatar">
            <img src="./assets/images/guanyu3.jpg" class="img-responsive">
            <!-- 阴影层 -->
            <div class="back">
              <p>企业文化</p>
            </div>
          </div>
        </div>
        <div class="jiantou wow fadeInUp" data-wow-delay="1100ms"><img src="./assets/images/guanyu5.png" class="img-responsive"></div>
        <div class="item wow fadeInUp" data-wow-delay="1300ms">
          <div class="avatar">
            <img src="./assets/images/guanyu4.png" class="img-responsive">
            <!-- 阴影层 -->
            <div class="back">
              <p>企业文化</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>


<!-- news -->
<div class="news">
  <div class="container">
    <div class="top">
      <h1>News center</h1>
      <div class="title">
        <div class="avatar"><img src="./assets/images/news4.jpg" class="img-responsive"></div>
        <div class="content">新闻中心</div>
        <div class="avatar"><img src="./assets/images/news5.png" class="img-responsive"></div>
      </div>
    </div>
    <div class="list">
      <div class="item">
        <div class="box wow fadeInUp" data-wow-delay="100ms">
          <div class="avatar"><img src="./assets/images/news.jpg" class="img-responsive"></div>
          <div class="text">
            <h1>A</h1>
            <p>智利北方矿业机械及装备展览会exponor chile</p>
            <p>20XX-09-12</p>
          </div>
        </div>
        <div class="box wow fadeInUp" data-wow-delay="300ms">
          <div class="avatar"><img src="./assets/images/news.jpg" class="img-responsive"></div>
          <div class="text">
            <h1>B</h1>
            <p>智利北方矿业机械及装备展览会exponor chile</p>
            <p>20XX-09-12</p>
          </div>
        </div>
        <div class="box wow fadeInUp" data-wow-delay="500ms">
          <div class="avatar"><img src="./assets/images/news.jpg" class="img-responsive"></div>
          <div class="text">
            <h1>C</h1>
            <p>智利北方矿业机械及装备展览会exponor chile</p>
            <p>20XX-09-12</p>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="img wow fadeInUp" data-wow-delay="100ms"><img src="./assets/images/news1.jpg" class="img-responsive"></div>
        <div class="img wow fadeInUp" data-wow-delay="300ms"><img src="./assets/images/news2.jpg" class="img-responsive"></div>
        <div class="img wow fadeInUp" data-wow-delay="500ms"><img src="./assets/images/news3.png" class="img-responsive"></div>
      </div>
    </div>
  </div>
</div>

<!-- cnat -->
<div class="cnat" id="cnat">
  <div class="container">
    <div class="top">
      <h1>Contact us</h1>
      <div class="title">
        <div class="avatar"><img src="./assets/images/about1.png" class="img-responsive"></div>
        <div class="content">联系我们</div>
        <div class="avatar"><img src="./assets/images/about1.png" class="img-responsive"></div>
      </div>
    </div>

    <div class="box">
      <div class="lianxi wow fadeInUp">
        <div class="dizhi">
          <h1>联系地址</h1>
          <p>上海市浦东区另江明街道</p>
        </div>
        <div class="fangfa">
          <h1>联系方法</h1>
          <div class="tel">Tel: 186-1234-5678</div>
          <div class="fax">Fax: 400-1234-5678</div>
          <div class="web">Web: www.baotu.com</div>
          <div class="email">Email: 425baotu.com</div>
        </div>
      </div>
      <div class="map wow fadeInUp" data-wow-delay="100ms" id="map"></div>
      <div class="zaixian wow fadeInUp" data-wow-delay="300ms">
        <h1>在线留名</h1>
        <div class="name">
          <input type="text" value="姓名：" style="border: 0;">
        </div>
        <div class="phone">
          <input type="text" value="电话：" style="border: 0;">
        </div>
        <div class="email">
          <input type="text" value="邮箱：" style="border: 0;">
        </div>
      </div>
      <div class="neirong wow fadeInUp" data-wow-delay="500ms">
        <div class="content">
          <input type="text"  value="内容：" style="border: 0;">
        </div>
        <div class="tijiao wow fadeInUp" data-wow-delay="700ms">
          <a href="javascript:void(0)">提交留言 >></a>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 底部 -->
<footer class="footer">
  <div class="container">
    <div class="list">
      <div class="item">首页</div>
      <span>▏</span>
      <div class="item">我们</div>
      <span>▏</span>
      <div class="item">新闻</div>
      <span>▏</span>
      <div class="item">产品</div>
      <span>▏</span>
      <div class="item">车间</div>
      <span>▏</span>
      <div class="item">招聘</div>
      <span>▏</span>
      <div class="item">联系</div>
      <span>▏</span>
      <div class="item">留言</div>
    </div>
    <div class="box">版权所有：上海市锻造有限责任公司</div>
    <div class="content">版权所有：XXX科技</div>
  </div>
</footer>
</html>
<!-- 引入jquery -->
<script src="./assets/js/jquery.min.js"></script>

<!-- 引入bootstrap js  -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- 引入less -->
<script src="./assets/js/less.min.js"></script>

<!-- 引入懒加载插件 -->
<script src="./assets/js/wow.min.js"></script>

<!-- 滚动视觉差插 -->
<script src="./assets/js/parallax.min.js"></script>

<!-- 制作懒加载效果 -->
<script>
  // 实例化懒加载动画效果
  new WOW().init();

  //创建百度地图对象
  var map = new BMapGL.Map('map');

  //初始化地图，设置中心点坐标和地图级别
  map.centerAndZoom(new BMapGL.Point(113.32115, 23.10259), 20);

  map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
    map.addControl(scaleCtrl);
    var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
    map.addControl(zoomCtrl);

  //添加地图的控件
  map.addControl(new BMap.MapTypeControl({
    mapTypes:[
      BMAP_NORMAL_MAP,
      BMAP_HYBRID_MAP
    ]
  }));

  map.seCurrentCity("广州");

  map.enableScrollWheelZoom(true);
</script>